<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body ng-controller="mainController">
	<ul ng-controller="subController">
		<li ui-sref="page1">page-1</li>
		<li ui-sref="page2.page2-1">page-2-1</li>
		<li ui-sref="page2.page2-2">page-2-2</li>
		<li ui-sref="page3">page-3</li>
		<li ng-click="go()">state to page-3</li>
		<li ng-click="back()">back</li>
		<li ng-click="emit()">emit</li>
		<li ng-click="broadcast()">broadcast</li>
	</ul>
	<div ng-controller="subController2"></div>
	<div ui-view></div>

	<script src="lib/angularjs/angular.js"></script>
	<script src="lib/angularjs/angular-ui-router.js"></script>
	<script type="text/javascript">
		angular.module('myApp', ['ui.router'])
		.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider){
			$urlRouterProvider.otherwise("/page1");
			$stateProvider.state('page1',{
				url: '/page1',
				templateUrl: './tmpl/page1.html'
			}).state('page2',{
				url: '/page2',
				abstract: true,
				templateUrl: './tmpl/page2.html'
			}).state('page2.page2-1',{
				url: '/page2-1',
				templateUrl: './tmpl/page2-1.html'
			}).state('page2.page2-2',{
				url: '/page2-2',
				templateUrl: './tmpl/page2-2.html'
			})
			.state('page3',{
				url: '/page3/:userId/:type',
				templateUrl: './tmpl/page3.html',
				controller: 'page3Ctrl',
				params: {
					userId: '5',
					type: '1'
				}
			})
		}])
		.controller('subController', ['$scope','$state','$window','$rootScope', function($scope,$state,$window,$rootScope){
			$scope.go = function(){
				$state.go('page3',{userId:22,type:11},{location:'replace'});	
			}
			$scope.back = function(){
				$window.history.back();	
			}
			$scope.emit = function(){
				$scope.$emit('sub-emit');
			}
			$scope.$on('root-broadcast',function(){
				console.log('接收到来自父级的事件','subController');
			});

			$scope.broadcast = function(){
				$rootScope.$broadcast('root-broadcast')
			}
			console.log($scope);
		}])
		.controller('mainController', ['$scope','$rootScope', function($scope,$rootScope){
			$scope.$on('sub-emit',function(){
				console.log('接收到来自子级的事件','mainScope');
			});

			$rootScope.$on('sub-emit',function(){
				console.log('接收到来自子级的事件','rootScope');
			})
			$scope.$on('root-broadcast',function(){
				console.log('接收到来自父级的事件','mainController');
			});
		}])
		.controller('page3Ctrl', ['$scope','$stateParams',function($scope,$stateParams){
			// console.log($stateParams)
		}])
		.controller('subController2', ['$scope', function($scope){
			$scope.$on('root-broadcast',function(){
				console.log('接收到来自父级的事件','subController2');
			});
		}])
	</script>
</body>
</html>